<template>
  <MPageHeader>
    <template #extra>
      <a-space :size="10">
        <div class="color-3">
          款式筛选
        </div>
        <a-select
          style="width: 240px"
        >
          <a-select-option value="jack">全部</a-select-option>
        </a-select>
        <a-button type="primary" shape="round" class="w-120" @click="addHandle">新增企业</a-button>
      </a-space>
    </template>
  </MPageHeader>
  <MPageContainer class="mt-1 bg-fff pt-1">
    <!-- <div class="empty-container bg-fff p-2 radius-12">
      <MEmpty />
      <a-button type="primary" shape="round" class="w-120" @click="addHandle">开始设计~</a-button>
    </div> -->
    <div class="flex flex-wrap">
      <div v-for="i in 8" class="flex p-1 justify-center" style="width: 20%; min-width: 260px;">
        <a-card  hoverable style="width: 240px; padding: 0;">
          <div class="flex justify-center">
            <div class="cloth-img"></div>
          </div>
          <div class="footer-container bg-F5F5FA">
            <a-descriptions
              size="small"
              :column="1"
              :labelStyle="{fontSize: '14px', color: '#A1A6B0', fontWeight: '400'}"
              :contentStyle="{fontSize: '14px', color: '#212325', fontWeight: '400'}"
            >
              <a-descriptions-item label="作品名称">慕旭茯</a-descriptions-item>
              <a-descriptions-item label="款式名称">比甲长袄</a-descriptions-item>
            </a-descriptions>
            <div class="flex justify-around mt-1">
              <a-button shape="round" style="width: 90px;" @click="gotoDetail('1')">查看详情</a-button>
              <a-button shape="round" type="primary" style="width: 90px;">去设计</a-button>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </MPageContainer>
</template>

<script lang="ts">
  import { SearchOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'
  const PAGINATION_INIT = {
    page: 1,
    size: 10,
    total: 900
  }
  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined,
      ArrowDownOutlined
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const { userStore } = useStore()
      const pagination = reactive({ ...PAGINATION_INIT })
      onMounted(() => {
      })

      const addHandle = () => {
        proxy.$router.push({
          path: '/company/add',
          query: {}
        })
      }

      const gotoDetail = (id) => {
        proxy.$router.push({
          path: '/design/list/detail',
          query: {
            id: id
          }
        })
      }

      return {
        userInfo: userStore.user || getUser(),
        pagination,
        dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ],
        addHandle,
        gotoDetail
      }
    },
    computed: {
      columns() {
        return [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
          {
            title: '操作',
            align: 'center',
            slots: { customRender: 'actions' }
          }
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  .empty-container {
    height: calc(100vh - 200px);
    min-height: 400px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .cloth-img {
    width: 150px;
    height: 240px;
    background-image: url('../../assets/image/1_1.png');
    background-repeat:  no-repeat;
    background-position: center center;
    background-size: contain;
  }
</style>
